<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
  <title>个人资料 - 社交圈</title>
  <!-- Bootstrap 5 CSS -->
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
  <!-- Font Awesome -->
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/font-awesome@4.7.0/css/font-awesome.min.css">
  
  <style>
    :root {
      --primary: #5B7BDF;
      --primary-light: #E8EBFA;
      --secondary: #FF7D54;
      --success: #4CAF50;
      --text-primary: #1D2129;
      --text-secondary: #86909C;
      --bg-light: #F2F3F5;
      --bg-white: #FFFFFF;
      --border-light: #E5E6EB;
      --premium: #FFD700;
    }
    
    body {
      font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
      background-color: var(--bg-light);
      color: var(--text-primary);
      line-height: 1.6;
      font-size: 15px;
      padding-bottom: 60px;
    }
    
    /* 顶部导航 */
    .navbar {
      background-color: var(--primary);
      color: white;
      padding: 0.75rem 1rem;
    }
    
    .navbar-nav .nav-link {
      color: rgba(255, 255, 255, 0.9);
      padding: 0.5rem 0.75rem;
    }
    
    .navbar-nav .nav-link.active {
      color: white;
      font-weight: 500;
    }
    
    /* 个人资料头部 */
    .profile-header {
      background-color: var(--bg-white);
      padding: 20px 15px 15px;
      margin-bottom: 15px;
    }
    
    .profile-cover {
      height: 160px;
      border-radius: 12px;
      background: url('https://picsum.photos/1000/400?random=5') center/cover no-repeat;
      position: relative;
      margin-bottom: -50px;
    }
    
    .profile-main {
      display: flex;
      padding: 0 15px;
      position: relative;
    }
    
    .profile-avatar {
      width: 100px;
      height: 100px;
      border-radius: 50%;
      border: 4px solid white;
      object-fit: cover;
    }
    
    .profile-info {
      flex: 1;
      margin-left: 15px;
      padding-top: 10px;
    }
    
    .profile-name {
      font-size: 22px;
      font-weight: 700;
      margin-bottom: 5px;
      display: flex;
      align-items: center;
      gap: 8px;
    }
    
    .verify-badge {
      color: var(--primary);
      font-size: 16px;
    }
    
    .profile-position {
      color: var(--text-secondary);
      font-size: 14px;
      margin-bottom: 8px;
    }
    
    .profile-actions {
      display: flex;
      gap: 10px;
    }
    
    .action-btn {
      padding: 6px 14px;
      border-radius: 20px;
      font-size: 14px;
      font-weight: 500;
      border: none;
      cursor: pointer;
    }
    
    .btn-message {
      background-color: var(--primary-light);
      color: var(--primary);
    }
    
    .btn-follow {
      background-color: var(--primary);
      color: white;
    }
    
    .btn-following {
      background-color: var(--bg-light);
      color: var(--text-secondary);
    }
    
    /* 社交数据 */
    .social-stats {
      display: flex;
      justify-content: space-around;
      background-color: var(--bg-white);
      padding: 15px 0;
      margin-bottom: 15px;
      text-align: center;
      border-top: 1px solid var(--border-light);
    }
    
    .stat-item {
      flex: 1;
    }
    
    .stat-number {
      font-size: 20px;
      font-weight: 700;
      margin-bottom: 3px;
    }
    
    .stat-label {
      font-size: 13px;
      color: var(--text-secondary);
    }
    
    /* 资料内容区块 */
    .profile-content {
      background-color: var(--bg-white);
      border-radius: 12px;
      margin: 0 15px 15px;
      overflow: hidden;
    }
    
    .content-header {
      padding: 15px 15px;
      border-bottom: 1px solid var(--border-light);
      font-size: 16px;
      font-weight: 600;
    }
    
    .content-body {
      padding: 15px;
    }
    
    /* 个人详情 */
    .detail-item {
      display: flex;
      padding: 12px 0;
      border-bottom: 1px solid var(--border-light);
    }
    
    .detail-item:last-child {
      border-bottom: none;
    }
    
    .detail-label {
      width: 80px;
      color: var(--text-secondary);
      font-size: 14px;
    }
    
    .detail-value {
      flex: 1;
      font-size: 15px;
    }
    
    .detail-link {
      color: var(--primary);
      text-decoration: none;
    }
    
    .detail-link:hover {
      text-decoration: underline;
    }
    
    /* 标签展示 */
    .tags-container {
      display: flex;
      flex-wrap: wrap;
      gap: 8px;
      margin-top: 5px;
    }
    
    .tag {
      padding: 4px 12px;
      background-color: var(--primary-light);
      color: var(--primary);
      border-radius: 15px;
      font-size: 13px;
    }
    
    /* 社交关系 */
    .relation-list {
      display: flex;
      overflow-x: auto;
      padding: 5px 0;
      gap: 15px;
      scrollbar-width: none;
    }
    
    .relation-list::-webkit-scrollbar {
      display: none;
    }
    
    .relation-item {
      display: flex;
      flex-direction: column;
      align-items: center;
      min-width: 70px;
    }
    
    .relation-avatar {
      width: 60px;
      height: 60px;
      border-radius: 50%;
      object-fit: cover;
      margin-bottom: 5px;
      border: 2px solid transparent;
    }
    
    .relation-item.followed .relation-avatar {
      border-color: var(--primary);
    }
    
    .relation-name {
      font-size: 13px;
      font-weight: 500;
      text-align: center;
      white-space: nowrap;
    }
    
    .relation-status {
      font-size: 11px;
      color: var(--success);
      margin-top: 2px;
    }
    
    /* 勋章展示 */
    .badges-container {
      display: flex;
      flex-wrap: wrap;
      gap: 15px;
      padding: 5px 0;
    }
    
    .badge-item {
      display: flex;
      flex-direction: column;
      align-items: center;
      width: 70px;
    }
    
    .badge-icon {
      width: 50px;
      height: 50px;
      border-radius: 50%;
      background-color: var(--primary-light);
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 24px;
      color: var(--primary);
      margin-bottom: 5px;
    }
    
    .badge-name {
      font-size: 12px;
      text-align: center;
      color: var(--text-secondary);
    }
    
    /* 底部导航 */
    .bottom-nav {
      position: fixed;
      bottom: 0;
      left: 0;
      right: 0;
      background-color: var(--bg-white);
      border-top: 1px solid var(--border-light);
      display: flex;
      justify-content: space-around;
      padding: 8px 0;
      z-index: 1000;
    }
    
    .nav-item {
      display: flex;
      flex-direction: column;
      align-items: center;
      color: var(--text-secondary);
      text-decoration: none;
      font-size: 10px;
      flex: 1;
    }
    
    .nav-item.active {
      color: var(--primary);
    }
    
    .nav-icon {
      font-size: 20px;
      margin-bottom: 3px;
    }
  </style>
</head>
<body>
  <!-- 顶部导航 -->
  <nav class="navbar navbar-expand">
    <div class="container-fluid">
      <ul class="navbar-nav w-100 justify-content-between">
        <li class="nav-item">
          <a class="nav-link" href="#" aria-label="返回">
            <i class="fa fa-arrow-left"></i>
          </a>
        </li>
        <li class="nav-item">
          <a class="nav-link active" href="#">个人资料</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#" aria-label="更多">
            <i class="fa fa-ellipsis-v"></i>
          </a>
        </li>
      </ul>
    </div>
  </nav>
  
  <!-- 个人资料头部 -->
  <div class="profile-header">
    <div class="profile-cover"></div>
  </div>
  
  <div class="profile-main">
    <img src="https://picsum.photos/200/200?random=6" alt="个人头像" class="profile-avatar">
    <div class="profile-info">
      <div class="profile-name">
        王宇轩
        <i class="fa fa-check-circle verify-badge" title="已认证"></i>
      </div>
      <div class="profile-position">产品经理 @科技创新公司 | 专栏作者</div>
      <div class="profile-actions">
        <button class="action-btn btn-message">
          <i class="fa fa-comment-o mr-1"></i> 私信
        </button>
        <button class="action-btn btn-following">
          <i class="fa fa-check mr-1"></i> 已关注
        </button>
      </div>
    </div>
  </div>
  
  <!-- 社交数据统计 -->
  <div class="social-stats">
    <div class="stat-item">
      <div class="stat-number">328</div>
      <div class="stat-label">动态</div>
    </div>
    <div class="stat-item">
      <div class="stat-number">5.7k</div>
      <div class="stat-label">粉丝</div>
    </div>
    <div class="stat-item">
      <div class="stat-number">245</div>
      <div class="stat-label">关注</div>
    </div>
    <div class="stat-item">
      <div class="stat-number">89.3k</div>
      <div class="stat-label">获赞</div>
    </div>
  </div>
  
  <!-- 个人简介 -->
  <div class="profile-content">
    <div class="content-header">个人简介</div>
    <div class="content-body">
      <p style="line-height: 1.7; margin-bottom: 0;">
        专注于用户体验与产品设计的从业者，热衷于探索新技术与产品结合的可能性。每周分享产品设计思考与行业洞察，欢迎交流讨论。
      </p>
    </div>
  </div>
  
  <!-- 基本资料 -->
  <div class="profile-content">
    <div class="content-header">基本资料</div>
    <div class="content-body">
      <div class="detail-item">
        <div class="detail-label">性别</div>
        <div class="detail-value">男</div>
      </div>
      <div class="detail-item">
        <div class="detail-label">生日</div>
        <div class="detail-value">1990年5月15日</div>
      </div>
      <div class="detail-item">
        <div class="detail-label">所在地</div>
        <div class="detail-value">北京市 海淀区</div>
      </div>
      <div class="detail-item">
        <div class="detail-label">职业</div>
        <div class="detail-value">产品经理 | 专栏作者</div>
      </div>
      <div class="detail-item">
        <div class="detail-label">网站</div>
        <div class="detail-value">
          <a href="#" class="detail-link">www.wangyuxuan.com</a>
        </div>
      </div>
      <div class="detail-item">
        <div class="detail-label">兴趣标签</div>
        <div class="detail-value">
          <div class="tags-container">
            <span class="tag">产品设计</span>
            <span class="tag">用户体验</span>
            <span class="tag">科技创新</span>
            <span class="tag">阅读</span>
            <span class="tag">摄影</span>
            <span class="tag">跑步</span>
          </div>
        </div>
      </div>
    </div>
  </div>
  
  <!-- 好友关系 -->
  <div class="profile-content">
    <div class="content-header">
      <div style="display: flex; justify-content: space-between; align-items: center;">
        <span>常互动好友</span>
        <a href="#" style="font-size: 14px; font-weight: normal; color: var(--primary);">查看全部</a>
      </div>
    </div>
    <div class="content-body">
      <div class="relation-list">
        <div class="relation-item followed">
          <img src="https://picsum.photos/200/200?random=10" alt="好友1" class="relation-avatar">
          <div class="relation-name">林晓雯</div>
          <div class="relation-status">已关注</div>
        </div>
        <div class="relation-item followed">
          <img src="https://picsum.photos/200/200?random=11" alt="好友2" class="relation-avatar">
          <div class="relation-name">张俊杰</div>
          <div class="relation-status">已关注</div>
        </div>
        <div class="relation-item followed">
          <img src="https://picsum.photos/200/200?random=12" alt="好友3" class="relation-avatar">
          <div class="relation-name">陈思远</div>
          <div class="relation-status">已关注</div>
        </div>
        <div class="relation-item">
          <img src="https://picsum.photos/200/200?random=13" alt="好友4" class="relation-avatar">
          <div class="relation-name">刘梦琪</div>
        </div>
        <div class="relation-item followed">
          <img src="https://picsum.photos/200/200?random=14" alt="好友5" class="relation-avatar">
          <div class="relation-name">赵宇恒</div>
          <div class="relation-status">已关注</div>
        </div>
        <div class="relation-item">
          <img src="https://picsum.photos/200/200?random=15" alt="好友6" class="relation-avatar">
          <div class="relation-name">黄雅莉</div>
        </div>
      </div>
    </div>
  </div>
  
  <!-- 获得勋章 -->
  <div class="profile-content">
    <div class="content-header">获得勋章</div>
    <div class="content-body">
      <div class="badges-container">
        <div class="badge-item">
          <div class="badge-icon" style="background-color: #FFF3E0; color: #FF9800;">
            <i class="fa fa-trophy"></i>
          </div>
          <div class="badge-name">创作达人</div>
        </div>
        <div class="badge-item">
          <div class="badge-icon" style="background-color: #E8F5E9; color: #4CAF50;">
            <i class="fa fa-star"></i>
          </div>
          <div class="badge-name">人气作者</div>
        </div>
        <div class="badge-item">
          <div class="badge-icon" style="background-color: #E3F2FD; color: #2196F3;">
            <i class="fa fa-calendar-check-o"></i>
          </div>
          <div class="badge-name">连续创作</div>
        </div>
        <div class="badge-item">
          <div class="badge-icon" style="background-color: #FCE4EC; color: #E91E63;">
            <i class="fa fa-heart"></i>
          </div>
          <div class="badge-name">万人迷</div>
        </div>
        <div class="badge-item">
          <div class="badge-icon" style="background-color: #EDE7F6; color: #9C27B0;">
            <i class="fa fa-lightbulb-o"></i>
          </div>
          <div class="badge-name">创意先锋</div>
        </div>
      </div>
    </div>
  </div>
  
  <!-- 底部导航 -->
  <div class="bottom-nav">
    <a href="#" class="nav-item">
      <i class="fa fa-home nav-icon"></i>
      <span>首页</span>
    </a>
    <a href="#" class="nav-item">
      <i class="fa fa-compass nav-icon"></i>
      <span>发现</span>
    </a>
    <a href="#" class="nav-item active">
      <i class="fa fa-user nav-icon"></i>
      <span>我的</span>
    </a>
  </div>
  
  <!-- Bootstrap JS -->
  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
  
  <script>
    // 关注按钮交互
    const followBtn = document.querySelector('.btn-follow, .btn-following');
    if (followBtn) {
      followBtn.addEventListener('click', function() {
        if (this.classList.contains('btn-following')) {
          this.classList.remove('btn-following');
          this.classList.add('btn-follow');
          this.innerHTML = '<i class="fa fa-plus mr-1"></i> 关注';
          
          // 更新关注状态
          document.querySelectorAll('.relation-item.followed').forEach(item => {
            item.classList.remove('followed');
            item.querySelector('.relation-status')?.remove();
          });
        } else {
          this.classList.remove('btn-follow');
          this.classList.add('btn-following');
          this.innerHTML = '<i class="fa fa-check mr-1"></i> 已关注';
        }
      });
    }
    
    // 点击好友头像查看详情
    document.querySelectorAll('.relation-avatar').forEach(avatar => {
      avatar.addEventListener('click', function() {
        const name = this.nextElementSibling.textContent;
        alert(`查看 ${name} 的个人资料`);
      });
    });
    
    // 点击勋章查看详情
    document.querySelectorAll('.badge-item').forEach(badge => {
      badge.addEventListener('click', function() {
        const name = this.querySelector('.badge-name').textContent;
        alert(`${name} 勋章：通过持续创作优质内容获得`);
      });
    });
  </script>
</body>
</html>
